<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>编辑图文</title>
    <style>
        .tier_top{width: 100%;height: 34px;margin-bottom: 20px;}
        .tier    {width: 100%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .tier_child{width: 100%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .tier_pool{width: 100%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .img_list{width: 150px;height: 100px;margin-left: 0px;cursor: pointer;}
        .img-top{width: 150px;height: 150px;float: left;margin-right: 15px;}
        .del-img{width: 150px;height: 20px;line-height: 20px;color: #ffffff;text-align: center;background: #e74c3c;border-radius: 3px;cursor: pointer;}
    </style>
</head>
<body>
<div class="box">
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <form role="form" enctype="multipart/form-data">
                <div class="form-group col-md-7" >
                    <label>图片标题</label>
                    <input type="text" id="title" class="form-control" value="{$data.title}">
                </div>
                <div class="form-group col-md-7">
                    <label>图片（点击图片修改，若不保存请先删除修改的图片）</label>
                    <div id="fodder-img-list">
                        <div class="img-top">
                            <img src="{$data.imgurl}" id="uploadimg" class="margin img_list">
                            <i ulink="{$data.imgurl}" title="删除" style="display: none;" class="del-img fa fa-trash-o"></i>
                        </div>
                    </div>
                </div>
                <div class="form-group col-md-7" id="tier" style="clear: both;">
                    <label>总分类</label>
                    <div class="tier_top">
                        <select class="tier">
                            <option value="">请选择总分类...</option>
                            {volist name="list" id="v"}
                            <option value="{$v.id}" {if condition="$data['category_sum'] eq $v['id']"}selected="selected"{/if}>{$v.categoryname}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <label>子分类</label>
                    <div class="tier_top">
                        <select class="tier_child">
                            <option value="">请选择子分类...</option>
                            {volist name="listchild" id="vo"}
                            <option value="{$vo.id}" {if condition="$data['category_child'] eq $vo['id']"}selected="selected"{/if}>{$vo.categoryname}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <label>账号池</label>
                    <div class="tier_top">
                        <select class="tier_pool">
                            <option value="">请选择账号池...</option>
                            {volist name="pool" id="voli"}
                            <option value="{$voli.id}" {if condition="$data['accountpool'] eq $voli['id']"}selected="selected"{/if}>{$voli.poolname}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <label>是否指定图文位置</label>
                    <div class="tier_top">
                        <select class="tier" id="img_local">
                            <option value="0">未指定</option>
                            <option value="1" {if condition="$data['img_local'] eq 1"}selected="selected"{/if}>1</option>
                            <option value="1" {if condition="$data['img_local'] eq 2"}selected="selected"{/if}>2</option>
                            <option value="1" {if condition="$data['img_local'] eq 3"}selected="selected"{/if}>3</option>
                            <option value="1" {if condition="$data['img_local'] eq 4"}selected="selected"{/if}>4</option>
                            <option value="1" {if condition="$data['img_local'] eq 5"}selected="selected"{/if}>5</option>
                            <option value="1" {if condition="$data['img_local'] eq 6"}selected="selected"{/if}>6</option>
                            <option value="1" {if condition="$data['img_local'] eq 7"}selected="selected"{/if}>7</option>
                            <option value="1" {if condition="$data['img_local'] eq 8"}selected="selected"{/if}>8</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <label>优先级</label>
                    <input type="number" id="priority" class="form-control" value="{$data.priority}">
                </div>
                <input type="hidden" id="uid" value="{$data.id}">
                <div class="form-group col-md-7" >
                    <div id="btn_save" class="btn pull-right" style="background: #18bc9c;color: #ffffff;">保存</div>
                </div>
            </form>
        </div>
    </section>
</div>
</body>
<script>
    var _num    = 1;
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadimg' //绑定元素
            ,accept:'images'
            ,exts:'jpg|png|gif|jpeg'
            ,multiple:false
            ,size: 2048
            ,auto:true
            ,url: '{:url("admin/Fodder/uploadImg")}' //上传接口
            , before: function (input) {
                loading = layer.load(2, {
                    shade: [0.2, '#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                if(res.code == 0){
                    $('#uploadimg').attr('src',res.msg)
                    $('.del-img').attr('ulink',res.msg)
                    $('.del-img').show();
                }else{
                    ayerAlert(res.msg);
                }

            }
            ,error: function(){
                layerAlert('系统出错，请联系管理员');
            }
        });
    });
    $(function(){
        //删除上传的图片
        $('#fodder-img-list').on('click','.del-img ',function(){
            var $_this = $(this);
            var _uid = $_this.attr('uid');
            var _ulink = $_this.attr('ulink');
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('fodder/deleditUploadImg')}",
                data:{ulink:_ulink,uid:_uid},
                success:function(data){
                    if(data.code == 0){
                        var html = '<img src="{$data.imgurl}" id="uploadimg" class="margin img_list">';
                        $('#uploadimg').attr('src','{$data.imgurl}');
                        $_this.hide();
                    }else{
                        layerAlert(data.msg);
                    }
                }
            });
        });
        //获取总分类下的子分类
        $('#tier').on('change','.tier',function(){
            var $_this = $(this);
            var _id = $_this.val();
            $.ajax({
                type: 'post',
                cache: false,
                url: '{:url("admin/Replyfans/getCategoryChild")}',
                data: {cid: _id},
                success: function (data) {
                    if (data.code == "0") {
                        $('.tier_child option').remove();
                        var html = '<option value="">请选择子分类...</option>';
                        $('.tier_child').append(html);
                        $.each(data.info, function (index, item) {
                            var html = '<option value="' + item.id + '">' + item.categoryname + '</option>';
                            $('.tier_child').append(html);
                        });
                        $('.tier_pool option').remove();
                        var htm2l = '<option value="">请选择账号池...</option>';
                        $('.tier_pool').append(htm2l);
                    }
                }
            });
        });
        //获取账号池
        $('.tier_top').on('change','.tier_child',function(){
            var $_this3 = $(this);
            var _id = $_this3.val();
            $.ajax({
                type: 'post',
                cache: false,
                url: '{:url("admin/Fodder/getFodderPool")}',
                data: {cid: _id},
                success: function (data) {
                    if (data.code == "0") {
                        $('.tier_pool option').remove();
                        var html = '<option value="">请选择账号池...</option>';
                        $('.tier_pool').append(html);
                        $.each(data.info, function (index, item) {
                            var html = '<option value="' + item.id + '">' + item.poolname + '</option>';
                            $('.tier_pool').append(html);
                        });
                    }
                }
            });
        });
        //保存
        $('#btn_save').click(function(){
            var _title = $('#title').val();
            var _sum = $('.tier').val();
            var _child = $('.tier_child').val();
            var _pool = $('.tier_pool').val();
            var _img_local = $('#img_local').val();
            var _priority = $('#priority').val();
            var _img = $('#uploadimg').attr('src');
            if(_sum == ''){
                layerAlert('请选择总分类...',function(){
                    return false;
                });
            }
            if(_child == ''){
                layerAlert('请选择子分类...',function(){
                    return false;
                });
            }
            var _id = $('#uid').val();
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('admin/Replyfans/doEditImgText')}",
                data:{title:_title,img:_img,priority:_priority,img_local:_img_local,sum:_sum,child:_child,pool:_pool,id:_id},
                success:function(data){
                    if(data.code==0){
                        layerAlert(data.msg,function(){
                            parent.relist();
                            layerParentClose();
                        });
                    }else{
                        layerAlert(data.msg);
                    }
                }
            })
        })
    });
</script>
</html>